<div class="main-container">
    <div class="search-wrap">
        <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm" *ngIf="isSketchMapTpl">
            <nz-form-item>
                <nz-form-label>闸门名称</nz-form-label>
                <nz-form-control>
                    <input formControlName="watergateCode" nz-input placeholder="请输入闸门名称"/>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label>管理单位</nz-form-label>
                <nz-form-control>
                    <nz-select formControlName="sectionId" nzPlaceHolder='请选择管理单位'>
                        <nz-option *ngFor="let item of mngList" [nzValue]="item.id" [nzLabel]="item.manageName"></nz-option>
                    </nz-select>
                </nz-form-control>
            </nz-form-item>
            <!--<nz-form-item>-->
                <!--<nz-form-label>所属渠道</nz-form-label>-->
                <!--<nz-form-control>-->
                    <!--<input formControlName="canalName" nz-input placeholder="请输入渠道名称"/>-->
                <!--</nz-form-control>-->
            <!--</nz-form-item>-->
            <nz-form-item>
                <nz-form-control>
                    <button nz-button nzType="primary" (click)="queryInfo()"><i nz-icon nzType="search"></i>查询</button>
                </nz-form-control>
            </nz-form-item>
        </form>
        <div class="right-btn">
            <!--<button nz-button nzType="default" (click)="isSketchMapTpl = !isSketchMapTpl">{{isSketchMapTpl ? '切换至概化图' : '切换至列表'}}</button>-->
            <button nz-button nzType="default" (click)="directToList()">切换至列表页</button>
        </div>
    </div>

    <ng-container>
        <div class="main-wrap">
            <ul>
                <li *ngFor="let item of gateList">
                    <div class="custom-box"
                         [ngClass]="{'open': item.runstatus === '上行', 'close': item.runstatus === '下行', 'stop': item.runstatus === '停止'}"
                         (click)="openGateDetailModal(item)">
                        <div class="top-box">
                            <div class="status-icon">
                                {{item.runstatus}}
                            </div>
                            <p class="box-title">
                                <span class="title-icon"></span>
                                {{item.watergateCode}}
                            </p>
                            <p class="time">
                                最后通讯时间： {{item.gatherTime | date:'yyyy-MM-dd HH:mm:ss'}}
                            </p>
                            <div class="mng-info">
                                <p>所属渠道： {{item.canalType}}</p>
                                <p>管理单位： {{item.manageName}}</p>
                            </div>
                        </div>
                        <div class="bottom-box">
                            <p>
                                <i class="info-icon"></i>
                                闸门开度： {{item.degree}}mm
                            </p>
                            <p>
                                <i class="info-icon"></i>
                                瞬时流量： {{item.flux}}m³/s
                            </p>
                            <p>
                                <i class="info-icon"></i>
                                日过水量： {{item.dailyWater}}m³
                            </p>
                            <p>
                                <i class="info-icon"></i>
                                日均流量： {{item.dailyFlow}}m³/s
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </ng-container>
    <!--<ng-container *ngIf="!isSketchMapTpl">-->
        <!--&lt;!&ndash;<app-gate-control-diagram></app-gate-control-diagram>&ndash;&gt;-->
        <!--<app-gate-control-list></app-gate-control-list>-->
    <!--</ng-container>-->

</div>
